Automatic Series Generation with MVVM

This topic assumes that you have created a new Visual Studio project and added the appropriate references to your project.

Step 1) Create the Markup

This is the XAML markup that will get your started:

XAML	Copy Code
<c1:C1Chart Name="c1Chart1"> <c1:C1Chart.Data> <c1:ChartData SeriesItemsSource="{Binding SeriesDataCollection}"> <c1:ChartData.SeriesItemTemplate> <DataTemplate> <c1:DataSeries Label="{Binding Year}" ValuesSource="{Binding Values}" /> </DataTemplate> </c1:ChartData.SeriesItemTemplate> </c1:ChartData> </c1:C1Chart.Data> <c1:C1ChartLegend DockPanel.Dock="Right" /> </c1:C1Chart>

XAML

Copy Code

<c1:C1Chart Name="c1Chart1">
    <c1:C1Chart.Data>
        <c1:ChartData SeriesItemsSource="{Binding SeriesDataCollection}">
         <c1:ChartData.SeriesItemTemplate>
                <DataTemplate>
                    <c1:DataSeries Label="{Binding Year}" ValuesSource="{Binding Values}" />
              </DataTemplate>
    </c1:ChartData.SeriesItemTemplate>
        </c1:ChartData>
    </c1:C1Chart.Data>
    <c1:C1ChartLegend DockPanel.Dock="Right" />
</c1:C1Chart>

Note that the SeriesItemsSource and SeriesItemTemplate are set on the ChartData object, and are bound values.

Step 2) Create the View Model

Next, you need to create the ViewModel for your project.

Right-click your project name and select Add| New Item
Select Code File, name it ViewModel.cs, and click OK.

Add the following code to your code file to create the View Model:

C#	Copy Code
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.ComponentModel; using System.Collections.ObjectModel; namespace ChartAutomaticSeries { public static class ViewModelData { public static int NUM_SERIES = 5; public static int NUM_POINTS = 8; public static Random Rnd = new Random(); private static ChartModelData _data; public static ChartModelData ChartData { get { if (_data == null) { _data = new ChartModelData(); } return _data; } } } public class ChartModelData { public ObservableCollection<SeriesData> SeriesDataCollection { get { if (_seriesDataCollection == null) { _seriesDataCollection = new ObservableCollection<SeriesData>(); for (int i = 0; i < ViewModelData.NUM_SERIES; i++) _seriesDataCollection.Add(new SeriesData(2010 + i)); } return _seriesDataCollection; } } private ObservableCollection<SeriesData> _seriesDataCollection; } public class SeriesData : INotifyPropertyChanged { int _year; double[] _values; public SeriesData(int year) { _year = year; _values = new double[ViewModelData.NUM_POINTS]; for (int i = 0; i < ViewModelData.NUM_POINTS; i++) _values[i] = ViewModelData.Rnd.Next(0, 100); } public int Year { get { return _year; } set { if (_year != value) { _year = value; OnPropertyChanged("Year"); } } } public double[] Values { get { return _values; } set { if (_values != value) { _values = value; OnPropertyChanged("Values"); } } } #region INotifyPropertyChanged Members public event PropertyChangedEventHandler PropertyChanged; private void OnPropertyChanged(string propertyName) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } } #endregion } }

Copy Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.ComponentModel;
using System.Collections.ObjectModel;

namespace ChartAutomaticSeries
{
    public static class ViewModelData
    {
        public static int NUM_SERIES = 5;
        public static int NUM_POINTS = 8;

        public static Random Rnd = new Random();

        private static ChartModelData _data;

        public static ChartModelData ChartData
        {
            get
            {
                if (_data == null)
                {
                    _data = new ChartModelData();
                }
                return _data;
            }
        }
    }

    public class ChartModelData
    {
        public ObservableCollection<SeriesData> SeriesDataCollection
        {
            get
            {
                if (_seriesDataCollection == null)
                {
                    _seriesDataCollection = new ObservableCollection<SeriesData>();
                    for (int i = 0; i < ViewModelData.NUM_SERIES; i++)
                        _seriesDataCollection.Add(new SeriesData(2010 + i));
                }
                return _seriesDataCollection;
            }
        }
        private ObservableCollection<SeriesData> _seriesDataCollection;
    }

    public class SeriesData : INotifyPropertyChanged
    {
        int _year;
        double[] _values;

        public SeriesData(int year)
        {
            _year = year;

            _values = new double[ViewModelData.NUM_POINTS];
            for (int i = 0; i < ViewModelData.NUM_POINTS; i++)
                _values[i] = ViewModelData.Rnd.Next(0, 100);
        }

        public int Year
        {
            get { return _year; }
            set
            {
                if (_year != value)
                {
                    _year = value;
                    OnPropertyChanged("Year");
                }
            }
        }

        public double[] Values
        {
            get { return _values; }
            set
            {
                if (_values != value)
                {
                    _values = value;
                    OnPropertyChanged("Values");
                }
            }
        }

        #region INotifyPropertyChanged Members

        public event PropertyChangedEventHandler PropertyChanged;

        private void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        #endregion
    }
}

Step 3) Adding Code

Switch back to your MainWindow.xaml file. Right-click the page and select View Code from the context menu.

Edit the existing code so that it resembles the following:

C#	Copy Code
public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); this.DataContext = new ChartModelData(); } } }